<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>3.新闻comuted版本</title>
    <!-- 引入Vue -->
    <script type="text/javascript" src="../../js/vue.js"></script>
    <script src="./new.js"></script>
    <link rel="stylesheet" href="./news.css" />
  </head>
  <body>
    <!-- 准备好一个容器-->
    <div id="app" class="News">
      <input type="search" v-model="search" />
      <ul>
        <li v-for="(item,index) in news2" class="News">
          <p class="p1">{{index+1}}</p>
          <a href="#">{{item.title}}</a>
          <p class="p2">{{item.hot}}</p>
        </li>
      </ul>
    </div>
  </body>

  <script type="text/javascript">
    //阻止 vue 在启动时生成生产提示。
    Vue.config.productionTip = false;

    new Vue({
      el: "#app",
      data: {
        news: news,
        news2: [],
        search: "",
      },
      watch: {
        search: {
          immediate: true,
          handler(newValue) {
            let news3 = this.news.filter((item) => {
              return item.title.indexOf(newValue) !== -1;
            });
            this.news2 = news3;
          },
        },
      },
    });
  </script>
</html>
